import { saveRange } from '@/services/api/api-assess-week-collect-app-range';
import { CheckCircleOutlined, CheckCircleTwoTone } from '@ant-design/icons';
import { ModalForm, ProFormDateRangePicker } from '@ant-design/pro-components';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import { Button, message } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';

interface AddAppRangeProps {
  onRefurbish: () => void;
}

const AddAppRange: React.FC<AddAppRangeProps> = ({ onRefurbish }) => {
  const access = useAccess();

  const formRef = useRef<ProFormInstance>();

  /**
   * 提交窗口
   */
  const [modalFormOpen, setModalFormOpenState] = useState<boolean>(false);

  const [saveInitData, setSaveInitDataState] = useState<AssessWeekCollectAppRecordData.SaveInit>();

  return (
    <DrawerForm
      key="add_assess_collect_range_drawer_form"
      title={'添加汇总范围'}
      drawerProps={{
        width: 500,
        maskClosable: false,
        destroyOnClose: true,
      }}
      layout="horizontal"
      formRef={formRef}
      trigger={
        <Button
          style={{
            marginRight: '5px',
          }}
          type="primary"
        >
          添加
        </Button>
      }
      initialValues={{}}
      submitter={{
        submitButtonProps: {
          style: {
            display: 'none',
          },
        },
        render: (props, defaultDoms) => {
          return [
            ...defaultDoms,
            <Button
              key="button_add_assess_collect_range"
              icon={<CheckCircleOutlined />}
              type="primary"
              style={{
                background: '#87d068',
              }}
              onClick={() => {
                setModalFormOpenState(true);
              }}
            >
              提交
            </Button>,
            <ModalForm
              key={'modal_add_assess_collect_range'}
              title={
                <>
                  <CheckCircleTwoTone
                    style={{
                      marginRight: 8,
                    }}
                    twoToneColor="#87d068"
                  />
                  确认提交
                </>
              }
              autoFocusFirstInput
              modalProps={{
                width: 400,
                destroyOnClose: true,
                onCancel: () => console.log('run'),
              }}
              open={modalFormOpen}
              onOpenChange={setModalFormOpenState}
              submitTimeout={2000}
              submitter={{
                submitButtonProps: {
                  type: 'primary',
                  style: { background: '#87d068' },
                },
              }}
              onFinish={async (values) => {
                props.submit();
                return true;
              }}
            />,
          ];
        },
      }}
      onFinish={async (values) => {
        console.log('===', values.dateRange);

        const response = await saveRange({
          startDate: values.dateRange[0],
          endDate: values.dateRange[1],
        });

        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
          return true;
        } else {
          return false;
        }
      }}
    >
      <ProFormDateRangePicker name="dateRange" label="范围区间" />
    </DrawerForm>
  );
};

export default AddAppRange;
